<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Web Browser</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="scripts/languages.js" type="text/javascript"></script>
        <script type="text/javascript">

            var loadingState = false;
            var lang = "en";
            if(window.sankore){
                try{
                    lang = sankore.locale().substr(0,2);
                    sankoreLang[lang].next;
                } catch(e){
                    lang = "en";
                }
            } else 
                lang = "en";
            
            function changeLoadingState(){
                loadingState = true;
            }
               
            $(document).ready(function(){

                $("body").css({height: $(window).height() - 40});
                
                $("#back-button").html(sankoreLang[lang].previous);
                $("#forward-button").html(sankoreLang[lang].next);
                $("#search-button").html(sankoreLang[lang].show);
                
                var popupFlag = false;
                var currentHistory = 0;
                var references = new Array();
                var globalWidth = 850;
                var globalHeight = 700;
                var url = "";
                var margins = {
                    top: cssToInt($("body").css("margin-top")), 
                    right: cssToInt($("body").css("margin-right")), 
                    bottom: cssToInt($("body").css("margin-bottom")),
                    left: cssToInt($("body").css("margin-left"))
                };
			
                var resizer; // Timer
                var resizerIndex;
                
                var popupText = $("<div id='popupWordInfo' class='popupWordInfo'></div>").appendTo("body");
                
                resizerIndex = 0;
									
                if(window.sankore){
                    url = window.sankore.preference("url", "");
                    if(sankore.preference("browserHistory", ""))
                        references = sankore.preference("browserHistory", "").split(",");
                    currentHistory = parseInt(sankore.preference("browserIndex", "0"));
                }else{
                    url = "";
                };
			
                $("#back-button")
                .click(function(){
                    loadingState = false;
                    if((currentHistory - 1) > 0){					
                        $("#textbox").val(references[--currentHistory-1]);						
                        $("#search-button").trigger("click");
                    }
                });
				
                $("#forward-button")
                .click(function(){
                    loadingState = false;
                    if(currentHistory < references.length) {
                        $("#textbox").val(references[currentHistory++]);
                        $("#search-button").trigger("click");
                    }
                });
		
                $("#search-button").mouseover(function(evt){
                    popupFlag = true;
                    popupText.css("top", evt.pageY + 5)
                    .css("left", evt.pageX + 13)
                    .css({width:"110px"})
                    .text(sankoreLang[lang].open)
                    .show("fast", function(){
                        if(!popupFlag)
                            popupText.hide();
                    });
                });
                
                $("#back-button").mouseover(function(evt){
                    popupFlag = true;
                    popupText.css("top", evt.pageY + 5)
                    .css("left", evt.pageX + 13)
                    .css({width:"130px"})
                    .text(sankoreLang[lang].prev_page)
                    .show("fast", function(){
                        if(!popupFlag)
                            popupText.hide();
                    });
                });
                
                $("#forward-button").mouseover(function(evt){
                    popupFlag = true;
                    popupText.css("top", evt.pageY + 5)
                    .css("left", evt.pageX + 13)
                    .css({width:"130px"})
                    .text(sankoreLang[lang].next_page)
                    .show("fast", function(){
                        if(!popupFlag)
                            popupText.hide();
                    });
                });
                
                $("#search-button, #back-button, #forward-button").mousemove(function(evt){
                    popupText.css("top", evt.pageY + 5)
                    .css("left", evt.pageX + 13);
                });
                
                $("#search-button, #back-button, #forward-button").mouseout(function(evt){
                    popupText.hide();
                    popupFlag = false;
                });
                
                $("#textbox").keypress(function(e) {
                    if(e.keyCode == 13) {
                        $("#search-button").trigger("click");
                    }
                });
			
                $("#search-button").click(function(){
                    if($("#textbox").val().length > 0){
                        loadingState = false;
                        var url = $("#textbox").val();
                        var urlStart = url.split("://");
									
                        if(urlStart[0]!="http"){
                            url = "http://" + url;
                        };
						
                        if(checkURLs(references, url)){
                            if(currentHistory == references.length)
                                references[currentHistory++] = url;
                            else
                                references = insertInto(references, currentHistory++, url);
                        }
                        window.resizeTo(globalWidth, globalHeight);
						
                        $("#container").removeClass("welcome").removeClass("change")
                        .removeClass("error").addClass("load");
                        $("#container-shadow").hide();
                        $("#arrow").hide();
                        $("#embeded-content").hide();
                        $("#web-content").hide();
                        $('#web-content').attr('src',url);
							
                        checkcontent();
                        checkLoading();
                    } else {
                        $("#embeded-content").load("locales/" + lang + "/howto.html"); // Welcome screen with some explanations
                        $("#container")
                        .addClass("welcome")
                        .addClass("change")
                        .addClass("error")
                        .removeClass("load");
                        $("#container-shadow").show();
                        $("#arrow").show();
                        $("#embeded-content").show();
                        $("#web-content").hide();
                        window.resizeTo(550, 280);
                    }
                })
                .mouseenter(function(){
                    $(this)
                    .addClass("over");
                })
                .mouseleave(function(){
                    $(this)
                    .removeClass("over");
                });
			
                if(url.length > 0){
                    $("#textbox").val(url);	
                    $("#search-button").trigger("click");
                }else{
                    $("#embeded-content").load("locales/" + lang + "/howto.html"); // Welcome screen with some explanations
                };
		
                $(window).resize(function(){
                    $("body").css({height: $(window).height() - 40});
                    globalWidth = $(window).width();
                    globalHeight = $(window).height();
                    $("#web-content")
                    .attr("width", globalWidth - 60)
                    .attr("height", globalHeight - 120);
                });
							
                function checkcontent(){								
                    if(window.sankore){
                        window.sankore.setPreference("url", $("#textbox").val());
                        window.sankore.setPreference("browserHistory", references.toString());
                        window.sankore.setPreference("browserIndex", currentHistory);
                    };

                    $("#embeded-content").hide();
                    $("#container").removeClass("load").addClass("show");									
                };
			
                function checkLoading(){
                    if(loadingState){
                        clearTimeout(resizer);
                        resizerIndex = 0;
                        $("#web-content")
                        .attr("width", globalWidth - 25)
                        .attr("height", globalHeight - 90)
                        .show();
                        $(window).trigger("resize");
                        return false;
                    };
                    if(resizerIndex > 80){
                        resizerIndex = 0;
                        console.log("error on loading page");
                        $("#back-button").trigger("click");
                        $("#textbox").val($("#textbox").val().replace("http://", ""));
                        $("#textbox").val("http://www.metacrawler.com/search/web?&q=" + $("#textbox").val().replace("http://", "")+"&ql=");
                        $("#search-button").trigger("click");
                    }else{
                        resizer = setTimeout(function(){checkLoading()}, 100);
                        resizerIndex++;
                    };
                };
				
                function cssToInt(cssvalue){
                    return(parseInt(cssvalue.replace("px", "")));
                }
			
                function checkURLs(arr, value){
                    for(var i = 0; i < arr.length; i++)
                        if(arr[i] == value)
                            return false;
                    return true;
                }
			
                function insertInto(arr, index, url){
                    var newArr = new Array();
                    for(var i = 0, j = 0; i < arr.length; i++, j++)
                        if(i == index - 1){
                            newArr[j] = arr[i];
                            newArr[++j] = url;
                        } else 
                        newArr[j] = arr[i];
                    return newArr;
                }
				
                if (window.widget) {
                    window.widget.onremove = function(){
                        $("#web-content").empty();
                    }
                }				
			
            });
        </script>
    </head>

    <body>
        <div id="ubwidget">
            <div id="shadow"></div>

            <div id="inputfield">
                <div id="back-button" class="button">Previous</div>
                <div id="forward-button" class="button">Next</div>
                <input id="textbox" type="text">
                <div id="search-button" class="button">Show</div>
            </div>

            <div id="container" class="welcome">
                <div id="arrow"><img src="imgs/arrow.png" alt="arrow-top"></div>

                <div id="show-container">
                    <div id="embeded-content"></div>
                    <iframe id="web-content" name="web-content" src="" scrolling=auto frameborder=1 onload="changeLoadingState()"></iframe>
                </div>

                <table cellspacing="0" cellpadding="0" id="container-shadow">
                    <tr>
                        <td id="shadow-left"></td>
                        <td id="shadow-center">&nbsp;</td>
                        <td id="shadow-right"></td>
                    </tr>
                </table>
            </div>

        </div>
    </body>

</html>
